<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<#include "/header.html">
			<style type="text/css">
				* {
					padding: 0;
					margin: 0;
				}
				
				html,
				body {
					height: 100%;
					width: 100%;
				}
				
				canvas {
					display: block;
				}
				
				#mynetwork {
					height: 600px;
					width: 600px;
					border: 1px solid lightgray;
				}
				
				#loadingBar {
					position: absolute;
					top: 0px;
					left: 0px;
					width: 100%;
					height: 100%;
					background-color: rgba(200, 200, 200, 0.8);
					-webkit-transition: all 0.5s ease;
					-moz-transition: all 0.5s ease;
					-ms-transition: all 0.5s ease;
					-o-transition: all 0.5s ease;
					transition: all 0.5s ease;
					opacity: 1;
				}
				
				#wrapper {
					position: relative;
					width: 100%;
					height: 100%;
				}
				
				#text {
					position: absolute;
					top: 8px;
					left: 530px;
					width: 30px;
					height: 50px;
					margin: auto auto auto auto;
					font-size: 22px;
					color: #000000;
				}
				
				div.outerBorder {
					position: relative;
					top: 50%;
					width: 600px;
					height: 44px;
					margin: auto auto auto auto;
					border: 8px solid rgba(0, 0, 0, 0.1);
					background: rgb(252, 252, 252);
					/* Old browsers */
					background: -moz-linear-gradient(top, rgba(252, 252, 252, 1) 0%, rgba(237, 237, 237, 1) 100%);
					/* FF3.6+ */
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(252, 252, 252, 1)), color-stop(100%, rgba(237, 237, 237, 1)));
					/* Chrome,Safari4+ */
					background: -webkit-linear-gradient(top, rgba(252, 252, 252, 1) 0%, rgba(237, 237, 237, 1) 100%);
					/* Chrome10+,Safari5.1+ */
					background: -o-linear-gradient(top, rgba(252, 252, 252, 1) 0%, rgba(237, 237, 237, 1) 100%);
					/* Opera 11.10+ */
					background: -ms-linear-gradient(top, rgba(252, 252, 252, 1) 0%, rgba(237, 237, 237, 1) 100%);
					/* IE10+ */
					background: linear-gradient(to bottom, rgba(252, 252, 252, 1) 0%, rgba(237, 237, 237, 1) 100%);
					/* W3C */
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed', GradientType=0);
					/* IE6-9 */
					border-radius: 72px;
					box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
				}
				
				#border {
					position: absolute;
					top: 10px;
					left: 10px;
					width: 500px;
					height: 23px;
					margin: auto auto auto auto;
					box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
					border-radius: 10px;
				}
				
				#bar {
					position: absolute;
					top: 0px;
					left: 0px;
					width: 20px;
					height: 20px;
					margin: auto auto auto auto;
					border-radius: 11px;
					border: 2px solid rgba(30, 30, 30, 0.05);
					background: rgb(0, 173, 246);
					/* Old browsers */
					box-shadow: 2px 0px 4px rgba(0, 0, 0, 0.4);
				}
			</style>

			<link rel="stylesheet" type="text/css" href="${request.contextPath}/statics/css/vis.min.css" />
			<script src="${request.contextPath}/statics/libs/vis/vis.min.js"></script>
	</head>

	<body>
		<div style="display: flex;">
			<div id="rrapp" style="flex:1;">
				<div id="menuLayer" style="display: none;padding:10px;">
					<div style="border-bottom: 1px solid rgba(0,0,0,0.1);padding-bottom: 10px;">
						<h4>查询</h4>
						<input type="text" v-model="search"/>
						<input type="button" class="btn btn-warning" value="关键字搜索" onclick="vm.getKnowledgePointTree()" />
					</div>
					<div style="border-bottom: 1px solid rgba(0,0,0,0.1);padding-bottom: 10px;">
						<h4>新增知识点</h4>
						<input style="margin-bottom: 10px;" type="text" v-model="knowledgePointName" placeholder="新增知识点名称" />
						<input type="button" class="btn btn-default" value="新增知识点" onclick="vm.addKnowledgePoint()" />
					</div>
					<div>
						<h4>选择知识点同课程建立关系</h4>
						<ul id="menuTree" class="ztree"></ul>
					</div>
				</div>
				<div id="menuLayer2" style="display: none;padding:10px;">
					<input type="text" v-model="search" onchange="vm.getKnowledgePointTree()" />
					<input type="button" class="btn btn-warning" value="关键字搜索" onclick="vm.getKnowledgePointTree2()" />
					<ul id="menuTree2" class="ztree"></ul>
				</div>
				<div class="panel panel-default">
					<div class="panel-heading">课程与知识节点间关系</div>
					<form class="form-horizontal">
						<div class="form-group">
							<div class="col-sm-2 control-label">方向</div>
							<div class="col-sm-10">
								<select class="form-control" v-model="directionBeSelected" @change="getOccupationList">
									<option value="">请选择</option>
									<option v-for="item in directiones" :value="item.id">{{item.name}}</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-2 control-label">职业</div>
							<div class="col-sm-10">
								<select class="form-control" v-model="occupationBeSelected" @change="getCourseList">
									<option value="">请选择</option>
									<option v-for="item in occupation" :value="item.id">{{item.name}}</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-2 control-label">课程</div>
							<div class="col-sm-10">
								<select class="form-control" v-model="courseBeSelected" @change="getKnowledgeList">
									<option value="">请选择</option>
									<option v-for="item in course" :value="item.id">{{item.name}}</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-2 control-label">知识点</div>
							<div class="col-sm-10">
								<input style="margin-top: 10px;" type="button" class="btn btn-primary" @click="add" value="增加知识点及与上级课程间关系" />
								<input style="margin-top: 10px;" type="button" class="btn btn-primary" @click="del" value="删除知识点及与上级课程间关系" />
							</div>
						</div>
					</form>
				</div>

				<div class="panel panel-default">
					<div class="panel-heading">知识节点间关系</div>
					<form class="form-horizontal">
						<div class="form-group">
							<div class="col-sm-2 control-label">方向</div>
							<div class="col-sm-10">
								<select class="form-control" v-model="directionBeSelected" @change="getOccupationList">
									<option value="">请选择</option>
									<option v-for="item in directiones" :value="item.id">{{item.name}}</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-2 control-label">职业</div>
							<div class="col-sm-10">
								<select class="form-control" v-model="occupationBeSelected" @change="getCourseList">
									<option value="">请选择</option>
									<option v-for="item in occupation" :value="item.id">{{item.name}}</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-2 control-label">课程</div>
							<div class="col-sm-10">
								<select class="form-control" v-model="courseBeSelected" @change="getKnowledgeList">
									<option value="">请选择</option>
									<option v-for="item in course" :value="item.id">{{item.name}}</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-2 control-label">知识点</div>
							<div class="col-sm-10">
								<input type="button" data-toggle="modal" data-target="#alert1" class="btn btn-primary" value="增加知识点间关系" />
								<input @click="vm.getKnowledgePointTree3()" type="button" data-toggle="modal" data-target="#alert2" class="btn btn-primary" value="删除知识点间关系" />
							</div>
						</div>
						<!--增加课程关系弹窗-->
						<div id="alert1" class="modal fade bs-example-modal-lg1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
							<div class="modal-dialog modal-lg" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<h4 class="modal-title">增加知识节点间关系</h4>
									</div>
									<div class="modal-body">
										<div class="form-group">
											<div class="col-sm-2 control-label">起始知识节点</div>
											<div class="col-sm-10">
												<select class="form-control" v-model="startId" @click="vm.getKnowledgeList()">
													<option value="">请选择</option>
													<option v-for="item in knowledge" :value="item.id">{{item.label}}</option>
												</select>
											</div>
										</div>
										<div class="form-group">
											<div class="col-sm-2 control-label">指向知识节点</div>
											<div class="col-sm-10">
												<select class="form-control" v-model="endId" @click="vm.getKnowledgePointTree3()">
													<option value="">请选择</option>
													<option v-for="item in allKnowledge" :value="item.id">{{item.name}}</option>
												</select>
											</div>
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-primary" @click="addKnowledgePointRelationship" data-dismiss="modal">确定</button>
											<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!--删除课程及关系-->
						<div id="alert2" class="modal fade bs-example-modal-lg1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
							<div class="modal-dialog modal-lg" role="document">
								<div class="modal-content">
									<div class="modal-header">
										<h4 class="modal-title">删除知识节点间关系</h4>
									</div>
									<div class="modal-body">
										<div class="form-group">
											<div class="col-sm-2 control-label">删除知识节点</div>
											<div class="col-sm-10">
												<select class="form-control" v-model="deleteKnowledgePointId">
													<option value="">请选择</option>
													<option v-for="item in allKnowledge" :value="item.id">{{item.name}}</option>
												</select>
											</div>
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-primary" @click="delKnowledgeAndRelationShip2" data-dismiss="modal">确定</button>
											<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
										</div>
									</div>
									<!--<div class="modal-footer">
										<button type="button" class="btn btn-primary" @click="del">确定</button>
										<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
									</div>-->
								</div>
							</div>
						</div>

					</form>
				</div>
			</div>
			<div id="mynetwork" style="flex: 2;"></div>
		</div>
		<!-- 选择菜单 -->

		<script type="text/javascript">
			var setting = {
				data: {
					simpleData: {
						enable: true,
						idKey: "id",
						pIdKey: "parentId",
						rootPId: -1
					},
					key: {
						url: "nourl"
					}
				}
			};
			var ztree;

			var options = {
				locale: "cn",
				nodes: {
					shape: 'dot',
					size: 15,
					font: {
						size: 10
					},
					borderWidth: 1,
					shadow: true
				},
				edges: {
					//		smooth: true,
					widthConstraint: {
						maximum: 90
					},
					length: 200,
					font: {
						size: 8,
						align: 'top'
					},
					arrows: {
						to: true
					}
				},
			}
			var nodes = [];
			// create some edges
			var edges = [];
			// create a network
			var container = document.getElementById('mynetwork');
			var data = {
				nodes: nodes,
				edges: edges
			};

			var vm = new Vue({
				el: '#rrapp',
				data: {
					deleteKnowledgePointId: null,
					startId: null,
					endId: null,
					//		方向
					directiones: [],
					directionBeSelected: '',
					//		职业
					occupation: [],
					occupationBeSelected: '',
					//		课程
					course: [],
					courseBeSelected: '',
					knowledge: [],
					allKnowledge:[],
					search: "",
					knowledgePointName: null,
				},
				mounted() {
					this.getDirection();
				},
				methods: {
					addKnowledgePointRelationship: function() {
						$.ajax({
							type: "POST",
							url: baseURL + "knowledge/addKnowledgePointRelationship",
							contentType: "application/json",
							data: JSON.stringify({
								startId: vm.startId,
								endId: vm.endId
							}),
							success: function(r) {

								if(r.code != 0) {
									alert(("选择知识点相同，不可添加关系"))
									vm.getKnowledgeList()
								} else {
									/*vm.getCourseTree()*/
									alert("增加知识点间关系成功")
									vm.getKnowledgeList()
								}

							}
							/*error:function (r) {
								alert(("选择课程相同，不可添加关系"))
                                 vm.getCourseList()
                             }*/
						})
					},
					checkId: function(startId, endId) {
						if(startId = endId) {
							alert(("选择知识点相同，不可添加关系"))
						}

					},
					saveKnowledgeInCourseRelationship: function(node) {
						$.ajax({
							type: "POST",
							url: baseURL + "knowledge/saveKnowledgeInCourseRelationship",
							contentType: "application/json",
							data: JSON.stringify({
									endId: node.id,
									startId: vm.courseBeSelected
								
							}),
							success: function(r) {
								/*vm.getCourseTree()*/
								alert("增加关系成功")
								vm.getKnowledgeList();
							}
						});
					},
					delKnowledgeAndRelationShip2: function() {
						$.ajax({
							type: "POST",
							url: baseURL + "knowledge/delKnowledgeAndRelationShip",
							contentType: "application/json",
							data: JSON.stringify({
								startId: vm.deleteKnowledgePointId
							}),

							success: function(r) {
								vm.getKnowledgePointTree3()
								alert("删除成功")
								vm.getKnowledgeList();
							}
						})
					},
					delKnowledgeAndRelationShip: function(node) {
						$.ajax({
							type: "POST",
							url: baseURL + "knowledge/delKnowledgeAndRelationShip",
							contentType: "application/json",
							data: JSON.stringify({
								startId: node.id
							}),
							success: function(r) {
								vm.getKnowledgePointTree2()
								alert("删除知识点及关系成功")
								vm.getKnowledgeList();
							}
						});
					},
					addKnowledgePoint: function() {
						$.ajax({
							type: "POST",
							url: baseURL + "knowledge/addKnowledgePoint",
							contentType: "application/json",
							data: JSON.stringify({
								name: vm.knowledgePointName
							}),
							success: function(r) {
								vm.getKnowledgePointTree()
								vm.getKnowledgeList()
								alert("新增成功")
							}
						});
					},
					getKnowledgePointTree: function() {
						//加载菜单树
						$.get(baseURL + "knowledge/getAllKnowledge?search=" + vm.search, function(r) {
							ztree = $.fn.zTree.init($("#menuTree"), setting, r.tree);
						})
					},
					getKnowledgePointTree2: function() {
						//加载菜单树
						$.get(baseURL + "knowledge/getAllKnowledge?search=" + vm.search, function(r) {
							ztree = $.fn.zTree.init($("#menuTree2"), setting, r.tree);
						})
					},
					getKnowledgePointTree3: function() {
						//加载菜单树
						$.get(baseURL + 'knowledge/getAllKnowledge?search=', function(r) {
							vm.allKnowledge = r.tree
						})
					},
					add: function() {
						if(vm.courseBeSelected == '') {

							alert('请先选择课程', function() {});
							return
						}
						vm.getKnowledgePointTree()
						layer.open({
							type: 1,
							offset: '50px',
							skin: 'layui-layer-molv',
							title: "选择菜单",
							area: ['300px', '450px'],
							shade: 0,
							shadeClose: false,
							content: jQuery("#menuLayer"),
							btn: ['确定', '取消'],
							btn1: function(index) {
								var node = ztree.getSelectedNodes();
								vm.saveKnowledgeInCourseRelationship(node[0])
								layer.close(index);
							}
						});
					},
					deleteKnowledge: function() {
						if(vm.occupationBeSelected == '') {

							alert('请先选择职业', function() {});
							return
						}

						vm.delCourseAndShipNoNodes(vm.deleteCourseId)
					},
					del: function() {
						if(vm.courseBeSelected == '') {

							alert('请先选择课程', function() {});
							return
						}
						vm.getKnowledgePointTree2()
						layer.open({
							type: 1,
							offset: '50px',
							skin: 'layui-layer-molv',
							title: "选择菜单",
							area: ['300px', '450px'],
							shade: 0,
							shadeClose: false,
							content: jQuery("#menuLayer2"),
							btn: ['确定删除', '取消'],
							btn1: function(index) {
								var node = ztree.getSelectedNodes();
								vm.delKnowledgeAndRelationShip(node[0])

								layer.close(index);
							}
						});
					},
					getDirection: function() {
						var data = {
							parentId: 0,
						}
						$.ajax({
							type: "POST",
							url: baseURL + "knowledge/getDirection",
							contentType: "application/json",
							data: JSON.stringify(data),
							success: function(r) {
								vm.directiones = r.direction
							}
						});
					},
					getOccupationList: function() {
						var data = {
							parentId: vm.directionBeSelected,
						}
						$.ajax({
							type: "POST",
							url: baseURL + "knowledge/getDirection",
							contentType: "application/json",
							data: JSON.stringify(data),
							success: function(r) {
								vm.occupation = r.direction
							}
						});
					},
					getCourseList: function() {
						var data;
						for(let i = 0; i < vm.occupation.length; i++) {
							if(vm.occupation[i].id == vm.occupationBeSelected) {
								data = {
									occupation: vm.occupation[i].neo4JId,
								}
							}
						}
						$.ajax({
							type: "POST",
							url: baseURL + "knowledge/getCourseList",
							contentType: "application/json",
							data: JSON.stringify(data),
							success: function(r) {
								vm.course = r.course
							}
						});
					},
					getKnowledgeList: function() {
						var data = {
							startId: vm.courseBeSelected
						}
						$.ajax({
							type: "POST",
							url: baseURL + "knowledge/getKnowledgeList",
							contentType: "application/json",
							data: JSON.stringify(data),
							success: function(r) {
								vm.knowledge = r.nodes
								console.log(vm.knowledge)
								nodes = r.nodes;
								edges = r.edges;
								data = {
									nodes: nodes,
									edges: edges
								};
								var network = new vis.Network(container, data, options);
								network.on("click", function(params) {});
							}
						});
					}
				}
			});
		</script>
		<!--<script src="${request.contextPath}/statics/js/modules/knowledge/knowledge.js?_${.now?long}"></script>-->

	</body>

</html>